<template>
  <div class="person">
    <ul>
      <li v-for="person in list" :key="person.id">{{ person.name }} -- {{ person.age }}</li>
    </ul>
  </div>
</template>

<script setup name="Person" lang="ts">
import type {PersonType} from "@/types";

// // 只接收 list 属性
// defineProps(['list'])
// // 接收 list 同时将props中的 list 保存起来
// let a = defineProps(['list'])
//
// console.log(list)

// // 接收 list + 限制类型
// defineProps<{list: PersonType}>()

// 接收 list + 限制类型 + 限制必要性 + 指定默认值
import {withDefaults} from 'vue'

withDefaults(defineProps<{ list?: PersonType }>(), {
  list: () => [
    {id: 0, name: '坤', age: 18}
  ]
})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
